<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>9.Bootstrap常用辅助样式</title>

    <link rel="stylesheet" href="../css/bootstrap.css"/>

    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>
<body>
<div class="container">
    <p class="text-muted">这是一个带情境颜色的文字text-muted</p>

    <p class="text-primary">这是一个带情境颜色的文字text-primary</p>

    <p class="text-success">这是一个带情境颜色的文字text-success</p>

    <p class="text-info">这是一个带情境颜色的文字text-info</p>

    <p class="text-warning">这是一个带情境颜色的文字text-warning</p>

    <p class="text-danger">这是一个带情境颜色的文字text-danger</p>

    <div class="container">
        <div class="bg-primary"><h4>提示</h4>这是一个带情境颜色的文字bg-primary</div>

        <div class="bg-success"><h4>提示</h4>这是一个带情境颜色的文字bg-success</div>

        <div class="bg-info"><h4>提示</h4>这是一个带情境颜色的文字bg-info</div>

        <div class="bg-warning"><h4>提示</h4>这是一个带情境颜色的文字bg-warning</div>

        <div class="bg-danger"><h4>提示</h4>这是一个带情境颜色的文字bg-danger</div>
    </div>

    <div class="container">
        <button type="button" class="close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="container">
        <span class="caret"></span>
    </div>

    <div class="container">
        <input type="button" class="btn btn-primary pull-left" value="左浮动"/>
        <input type="button" class="btn btn-primary pull-right" value="右浮动"/>
    </div>

    <div class="container">
        <div class="center-block text-center">
            中心内容块
        </div>
    </div>

    <div class="container">

        <div class="show">
            被显示的内容
        </div>

        <div class="hidden">
            被隐藏的内容
        </div>
    </div>


</div>
</body>
</html>